<template>
	<transition name="slide-fade">
		<div v-show="menuState === 'open'" role="tablist" class="app-sidebar">
			<b-card no-body class="border-0">
				<b-card-header header-tag="header" class="p-0" role="tab">
					<b-button :class="mainBtnClass" block variant="info">
						<router-link class="menu-item-main" to="/">
							<b-icon icon="bar-chart-steps"></b-icon>
							首页
							<b-icon class="choosed" icon="caret-left-fill"></b-icon>
						</router-link>
					</b-button>
				</b-card-header>
			</b-card>

			<b-card no-body class="border-0">
				<b-card-header header-tag="header" class="p-0" role="tab">
					<b-button :class="articleBtnClass" block v-b-toggle.article variant="info">
						<b-icon icon="files"></b-icon>
						文章
						<b-icon class="choosed" icon="caret-left-fill"></b-icon>
					</b-button>
				</b-card-header>
				<b-collapse id="article" visible role="tabpanel">
					<b-list-group>
						<b-list-group-item class="pl-4 pt-1 pb-1">
							<router-link to="/articles" :class="{active: articles}">
								所有文章
							</router-link>
						</b-list-group-item>
						<b-list-group-item class="pl-4 pt-1 pb-1">
							<router-link to="/new-articles" :class="{active: newArticle}">
								写文章
							</router-link>
						</b-list-group-item>
						<b-list-group-item class="pl-4 pt-1 pb-1">
							<router-link to="/catalogs" :class="{active: catalogs}">
								分类目录
							</router-link>
						</b-list-group-item>
						<b-list-group-item class="pl-4 pt-1 pb-1">
							<router-link to="/tags" :class="{active: tags}">
								标签
							</router-link>
						</b-list-group-item>
					</b-list-group>
				</b-collapse>
			</b-card>

			<b-card no-body class="border-0">
				<b-card-header header-tag="header" class="p-0" role="tab">
					<b-button :class="mediaBtnClass" block v-b-toggle.media variant="info">
						<b-icon icon="images"></b-icon>
						媒体
						<b-icon class="choosed" icon="caret-left-fill"></b-icon>
					</b-button>
				</b-card-header>
				<b-collapse visible id="media" role="tabpanel">
					<b-list-group>
						<b-list-group-item class="pl-4 pt-1 pb-1">
							<router-link to="/medias" :class="{active: medias}">
								媒体库
							</router-link>
						</b-list-group-item>
					</b-list-group>
				</b-collapse>
			</b-card>
			
			<b-card no-body class="border-0">
				<b-card-header header-tag="header" class="p-0" role="tab">
					<b-button :class="themeBtnClass" block v-b-toggle.theme variant="info">
						<b-icon icon="grid3x3-gap"></b-icon>
						外观
						<b-icon class="choosed" icon="caret-left-fill"></b-icon>
					</b-button>
				</b-card-header>
				<b-collapse visible id="theme" role="tabpanel">
					<b-list-group>
						<b-list-group-item class="pl-4 pt-1 pb-1">
							<router-link to="/themes" :class="{active: themes}">
								主题
							</router-link>
						</b-list-group-item>
					</b-list-group>
				</b-collapse>
			</b-card>
			
			<b-card no-body class="border-0">
				<b-card-header header-tag="header" class="p-0" role="tab">
					<b-button :class="settingBtnClass" block v-b-toggle.setting variant="info">
						<b-icon icon="gear"></b-icon>
						设置
						<b-icon class="choosed" icon="caret-left-fill"></b-icon>
					</b-button>
				</b-card-header>
				<b-collapse visible id="setting" role="tabpanel">
					<b-list-group>
						<b-list-group-item class="pl-4 pt-1 pb-1">
							<router-link to="/setting-normals" :class="{active: settingNormals}">
								常规
							</router-link>
						</b-list-group-item>
						<b-list-group-item class="pl-4 pt-1 pb-1">
							<router-link to="/setting-write" :class="{active: settingWrite}">
								编写
							</router-link>
						</b-list-group-item>
						<b-list-group-item class="pl-4 pt-1 pb-1">
							<router-link to="/setting-discuss" :class="{active: settingDiscuss}">
								讨论
							</router-link>
						</b-list-group-item>
					</b-list-group>
				</b-collapse>
			</b-card>

		</div>
	</transition>
</template>

<script>
	
	import $ from 'jquery'
	
	export default {
		name: "app-sidebar",
		data: function() {
			return {
				articles: false,
				newArticle: false,
				catalogs: false,
				tags: false,
				medias: false,
				newMedia: false,
				themes: false,
				settingNormals: false,
				settingWrite: false,
				settingDiscuss: false,
				mainBtnClass: {
					'text-left': true,
					'menu-title': true,
					'p-0': true,
					'title-active': true
				},
				articleBtnClass: {
					'text-left': true,
					'menu-title': true,
					'title-active': false
				},
				mediaBtnClass: {
					'text-left': true,
					'menu-title': true,
					'title-active': false
				},
				themeBtnClass: {
					'text-left': true,
					'menu-title': true,
					'title-active': false
				},
				settingBtnClass: {
					'text-left': true,
					'menu-title': true,
					'title-active': false
				}
			};
		},
		methods: {
			changeMenuStats: function(val) {
				var menuFoucs = this.$store.state.menuFoucs
				this.tags = menuFoucs === 'tags'
				this.catalogs = menuFoucs === 'catalog'
				this.articles = menuFoucs === 'articles'
				this.newArticle = menuFoucs === 'new-articles'
				this.articleBtnClass['title-active'] = this.articles || this.newArticle || this.catalogs || this.tags
				this.mainBtnClass['title-active'] = menuFoucs === 'main'
				this.medias = menuFoucs === 'medias'
				this.newMedia = menuFoucs === 'upload-medias'
				this.mediaBtnClass['title-active'] = this.medias || this.newMedia
				this.themes = menuFoucs === 'themes'
				this.themeBtnClass['title-active'] = this.themes
				
				
				/* this.settingNormals = val === '/setting-normals'
				this.settingWrite = val === '/setting-write'
				this.settingDiscuss = val === '/setting-discuss'
				this.settingBtnClass['title-active'] = this.settingNormals || this.settingWrite || this.settingDiscuss
				this.medias = val === '/medias'
				this.newMedia = val === '/new-medias'
				this.mediaBtnClass['title-active'] = this.medias || this.newMedia
				this.articles = val === '/articles'
				this.newArticle = val === '/new-articles'
				this.catalogs = val === '/catalogs'
				this.tags = menuFoucs === 'tags'
				this.articleBtnClass['title-active'] = this.articles || this.newArticle || this.catalogs || this.tags
				this.mainBtnClass['title-active'] = menuFoucs === 'main' */
			}
		},
		created: function() {
			this.changeMenuStats()
		},
		watch: {
			menuFoucs: function(val) {
				this.changeMenuStats()
			}
		},
		computed: {
			menuState: function() {
				return this.$store.state.menuState;
			},
			menuFoucs: function() {
				return this.$store.state.menuFoucs;
			}
		}
	}
</script>

<style scoped>
	.app-sidebar {
		background-color: #23282d !important;
		width: 9.375rem;
		position: relative;
		float: left;
	}

	.app-sidebar:first-child {
		padding-top: 0.625rem;
	}

	.card,
	.card-header,
	.card-header>.btn {
		background-color: transparent !important;
	}

	.card-header,
	.card-header>.btn {
		border: none !important;
	}

	.card-header>.btn,
	.menu-item-main,
	.list-group-item>a {
		font-size: 0.8125rem !important;
	}

	.card-header>.btn:visited {
		border: none !important;
	}

	.list-group-item>a {
		color: #96a5b4 !important;
		width: 100%;
		display: block;
		padding: 0.3125rem 0rem 0.3125rem 1.25rem;
	}

	.list-group-item>a:hover {
		color: #bcb7f0 !important;
		text-decoration: none !important;
	}

	.list-group-item {
		background-color: #32373c !important;
		padding: 0 !important;
	}

	.active {
		border: none;
	}

	.list-group-item>.active {
		color: #faff00 !important;
		background-color: transparent;
	}

	.choosed {
		position: relative;
		float: right;
		right: -1.125rem;
		display: none !important;
	}

	.card-header>button.title-active {
		background-color: #0073aa !important;
		border-radius: 0;
	}

	.title-active .choosed {
		display: inline-block !important;
	}

	.menu-item-main {
		width: 100%;
		color: white;
		display: block;
		padding: 0.375rem 0.75rem 0.375rem 0.75rem;
	}

	.menu-item-main:hover,
	.menu-title:hover {
		color: #bcb7f0 !important;
		background-color: #101010 !important;
		text-decoration: none;
	}

	.slide-fade-enter-active {
		transition: all .1s ease;
	}

	.slide-fade-leave-active {
		transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
	}

	.slide-fade-enter,
	.slide-fade-leave-to {
		transform: translateX(-100px);
		opacity: 0;
	}

	/* 720分辨率（大于480px，小于767px） */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		.app-sidebar {}
	}
</style>
